<template>
  <el-row :gutter="20">
    <el-col :span="5">
      <DepartmentIndex
        ref="departmentIndexRef"
        @reloadUsersByDepartmentId="reloadUsers"
      />
    </el-col>
    <el-col :span="19">
      <UserManageIndex
        ref="userManageRef"
        :showPermissionViewButton="false"
        :showUploadPhotoButton="false"
        :operatorColumnWidth="200"
        @changeTreeSelectDepartment="setDepartmentInTree"
      />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// 导入管理账户列表
import UserManageIndex from '@/views/page/authority/usermanage/UserManageIndex.vue';
// 导入部门
import DepartmentIndex from '@/views/page/authority/usermanage/DepartmentIndex.vue';
// 定义用户管理组件的ref对象
interface UserManageIndexRef{ // 定义UserManageIndex的接口类型
  getUsersByDepartmentId:(departmentId:string)=>void // 当点击部门的某菜单时，显示相应部门的账户信息
}
const userManageRef = ref<UserManageIndexRef>();// 定义接口类型
// 根据左侧选中的部门节点加载账户信息
const reloadUsers = (departmentId:string):void => {
  userManageRef.value!.getUsersByDepartmentId(departmentId);
};

// 定义部门组件的ref对象
interface DepartmentIndexRef{ // 定义UserManageIndex的接口类型
  setCurrentDepartmentInTree:(departmentId:string)=>void
}
const departmentIndexRef = ref<DepartmentIndexRef>();// 定义接口类型
// 根据右侧账户管理查询菜单的部门下拉框选项，同步左侧的树形菜单当前节点
const setDepartmentInTree = (departmentId:string) => {
  departmentIndexRef.value!.setCurrentDepartmentInTree(departmentId);// 设置本组件中的tree默认选中的节点与外部值一致
};
</script>

<style scoped>

</style>
